<template>
  <div class="photo-comment">
    <!-- 第一行：向右无缝滚动 -->
    <div class="marquee-row right">
      <div class="marquee">
        <div class="marquee__track" style="--duration: 32s">
          <div class="marquee__group">
            <div
              v-for="item in topItems"
              :key="`top-${item.id}`"
              class="card"
              :style="{ backgroundColor: item.bgColor }">
              <img class="avatar" :src="item.img" :alt="item.name" />
              <div class="content">
                <div class="name">{{ item.name }}</div>
                <div class="comment">{{ item.comment }}</div>
              </div>
            </div>
          </div>
          <!-- 复制一份实现无缝 -->
          <div class="marquee__group" aria-hidden="true">
            <div
              v-for="item in topItems"
              :key="`top-dup-${item.id}`"
              class="card"
              :style="{ backgroundColor: item.bgColor }">
              <img class="avatar" :src="item.img" :alt="item.name" />
              <div class="content">
                <div class="name">{{ item.name }}</div>
                <div class="comment">{{ item.comment }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 第二行：向左无缝滚动 -->
    <div class="marquee-row left">
      <div class="marquee">
        <div class="marquee__track" style="--duration: 32s">
          <div class="marquee__group">
            <div
              v-for="item in bottomItems"
              :key="`bottom-${item.id}`"
              class="card"
              :style="{ backgroundColor: item.bgColor }">
              <img class="avatar" :src="item.img" :alt="item.name" />
              <div class="content">
                <div class="name">{{ item.name }}</div>
                <div class="comment">{{ item.comment }}</div>
              </div>
            </div>
          </div>
          <!-- 复制一份实现无缝 -->
          <div class="marquee__group" aria-hidden="true">
            <div
              v-for="item in bottomItems"
              :key="`bottom-dup-${item.id}`"
              class="card"
              :style="{ backgroundColor: item.bgColor }">
              <img class="avatar" :src="item.img" :alt="item.name" />
              <div class="content">
                <div class="name">{{ item.name }}</div>
                <div class="comment">{{ item.comment }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue';

  const list = ref<any>([
    {
      id: 'top',
      list: [
        {
          id: 1,
          name: 'John Kostrey',
          img: 'https://imgs.nexbie.com/uploads/0e25bb24433d482a9575b1e595a5717a.webp',
          comment: 'Nexbie made my design come to life!',
          bgColor: '#0F503C',
        },
        {
          id: 2,
          name: 'Emma',
          img: 'https://imgs.nexbie.com/uploads/c47e348f98b94fdabab71ef3770c5d2e.webp',
          comment: 'Easy and fun to create with AI.',
          bgColor: '#C25632',
        },
        {
          id: 3,
          name: 'Jake',
          img: 'https://imgs.nexbie.com/uploads/1b750ad618d7481eaa9c8283891c45b2.webp',
          comment: 'Always something new and fun to explore.',
          bgColor: '#2B77AA',
        },
        {
          id: 4,
          name: 'Olivia',
          img: 'https://imgs.nexbie.com/uploads/9d1b407beca64976afbd547f0acec152.webp',
          comment: 'Discovered so many unique designs here.',
          bgColor: '#32A16D',
        },
      ],
    },
    {
      id: 'bottom',
      list: [
        {
          id: 5,
          name: 'Noah',
          img: 'https://imgs.nexbie.com/uploads/8125554820fc4e2e93ffe8ffa873a783.webp',
          comment: 'Loved competing in Nexbie Arcade!',
          bgColor: '#BE4B0A',
        },
        {
          id: 6,
          name: 'Ava',
          img: 'https://imgs.nexbie.com/uploads/b42f2ed8329c4f96bbd50c309c9a02f9.webp',
          comment: 'AI and creativity, perfectly combined.',
          bgColor: '#283750',
        },
        {
          id: 7,
          name: 'Liam',
          img: 'https://imgs.nexbie.com/uploads/bf4a6aaeeecd44dea66d1bcb5106b87c.webp',
          comment: 'Simple, smart, and truly creative.',
          bgColor: '#9B6400',
        },
        {
          id: 8,
          name: 'Sophia',
          img: 'https://imgs.nexbie.com/uploads/2b75d626c507434d8511764c925c710d.webp',
          comment: 'With Nexbie, creating anything is possible.',
          bgColor: '#78286E',
        },
      ],
    },
  ]);

  const topItems = computed(() => {
    const row = list.value.find((r: any) => r.id === 'top');
    return row?.list || [];
  });

  const bottomItems = computed(() => {
    const row = list.value.find((r: any) => r.id === 'bottom');
    return row?.list || [];
  });
</script>

<style scoped lang="scss">
  .photo-comment {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .marquee-row {
    width: 100%;
    overflow: hidden;
  }

  .marquee {
    width: 100%;
    overflow: hidden;
    user-select: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  .marquee__track {
    display: flex;
    width: max-content;
    // 两组连续内容，配合 transform: translateX(-50%) 实现无缝
    animation-duration: var(--duration, 30s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .marquee-row.left .marquee__track {
    animation-name: scroll-left;
  }

  .marquee-row.right .marquee__track {
    animation-name: scroll-right;
  }

  .marquee__group {
    display: flex;
    gap: 12px;
    padding: 0 8px;
  }

  .card {
    display: inline-flex;
    //align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    color: #fff;
    //white-space: nowrap;
    //box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    //min-height: 64px;
    width: 240px;
  }

  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.2);
  }

  .content {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }

  .name {
    font-weight: 700;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 4px;
  }

  .comment {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
  }

  @keyframes scroll-left {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }

  @keyframes scroll-right {
    from {
      transform: translateX(-50%);
    }
    to {
      transform: translateX(0);
    }
  }
  .item_view {
    display: flex;
    flex-direction: row;
    width: 240px;
    height: 74px;
    padding: 8px 12px;
    margin-right: 16px;
    margin-bottom: 15px;
    border-radius: 8px;
  }

  .avt_img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .text_view {
    display: flex;
    flex-direction: column;
    text-align: left;
  }
  .name {
    color: #fff;
    font-family: CrealitySans;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
  .comment {
    color: #fff;
    font-family: CrealitySans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    flex-wrap: wrap;
  }
</style>
